<template>
  <li class="cml-module-box"
    v-if="isShowModule">
    <button class="cml-module-title"
      :class="[defaultOpen && !disabled ? 'active' : '']"
      @click.stop="toggleCollapse">
      <div class="cml-module-title-t">
        <div class="cml-module-title-text">
          <img v-if="imgSrc"
            :src="imgSrc"
            alt="icon" />
          <div v-else
            class="icon">
            <i class="platformicon"
              :class="[`icon_${icon}`]"></i>
          </div>
          <span>{{ moduleName }}</span>
        </div>
        <span>
          <button class="cml-collapse-btn"
            tabindex="-1">
            <svg class="triangle"
              :class="[defaultOpen && !disabled ? 'arrow-open' : '']"
              fill="currentColor"
              viewBox="0.1 -0.5 6 6">
              <path d="M.75.4h4.5a.49.49,0,0,1,.43.74L3.43,5.07a.5.5,0,0,1-.86,0L.32,1.14A.49.49,0,0,1,.75.4Z" />
            </svg>
          </button>
        </span>
      </div>
    </button>
    <div ref="cmlCollapse"
      class="cml-collapse">
      <transition name="cml"
        @before-enter="beforeEnter"
        @enter="enter"
        @after-enter="afterEnter"
        @leave='leave'>
        <ul class="cml-module-list"
          v-show="(!disabled && defaultOpen)"
          ref="list">
          <slot :heigh='height'></slot>
        </ul>
      </transition>
    </div>
  </li>
</template>
<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
import Bus from '../util/bus'

export default {
  name: 'CmlModule',
  components: {},
  model: {},
  inject: ['options'],
  props: {
    moduleName: {
      type: String,
      required: true
    },
    icon: {
      type: String,
      default: 'aifuzhu'
    },
    index: {
      type: String,
      validator: function(val) {
        return val.includes('-')
      }
    },
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 高度
      height: 0,
      isOpen: false, // 当不通过外部控制的时候使用内部控制
      group: '', // 模块编组
      order: '', // 模块序号
      isShowModule: false
    }
  },
  computed: {
    ...mapState('cmlpanel', ['collapseData', 'license']),
    ...mapGetters('cmlpanel', ['getDefaultOpenBlock']),
    // 图标src
    imgSrc() {
      let reg = /\.(jpg|png|svg)$/gi
      if (reg.test(this.icon)) {
        return this.icon
      } else {
        return false
      }
    },
    // 展开或者收起控制
    defaultOpen() {
      // todo 响应父级传递的uniqueOpened 和 defaultOpen 参数
      let unq = this.collapseData.uniqueOpened,
        groupItems = this.collapseData.group[`${this.group}`] //array

      if (!this.disabled && groupItems.includes(this.order)) {
        // 向父组件传递开启事件
        this.options.change(this.index || this._uid, true)
        return true
      } else {
        // 向父组件传递关闭事件
        this.options.change(this.index || this._uid, false)
        Bus.$emit('close', null) // 处理折叠后关闭二级面板
        return false
      }
    }
  },
  watch: {
    getDefaultOpenBlock: {
      handler: function(val) {
        if (val.includes(this.index)) {
          // let currentGroup = this.collapseData.group[`${this.group}`]
          let unq = this.collapseData.uniqueOpened
          if (unq) {
            this.removeBlockInfo({ name: this.group, data: this.order })
            // currentGroup.splice(0, 1, this.order)
          } else {
            this.addBlockGroupInfo({ name: this.group, data: this.order })
            // currentGroup.push(this.order)
          }
        }
      }
    },
    'collapseData.uniqueOpened': {
      handler: function(val) {
        if (val) {
          this.removeBlockInfoLeftOne({ name: this.group })
        }
      }
    },
    'collapseData.defaultOpen': {
      handler: function() {
        const gid = this.options.groupId // cml-collapse 的 _uid
        let ind = this.index || this._uid,
          def = this.getDefaultOpenBlock
        this.group = `_${gid}`
        this.order = `${ind}`
        if (def.includes(ind)) {
          this.addBlockGroupInfo({ name: this.group, data: `${ind}` })
        }
      }
    }
  },
  created() {
    const gid = this.options.groupId // cml-collapse 的 _uid
    let ind = this.index || this._uid,
      def = this.getDefaultOpenBlock, // Array
      group = this.collapseData.group,
      unq = this.collapseData.uniqueOpened
    this.group = `_${gid}`
    this.order = `${ind}`

    if (!group[`_${gid}`]) {
      this.setBlockGroupInfo({ name: this.group, data: [] })
    }
    if (def.includes(ind)) {
      this.addBlockGroupInfo({ name: this.group, data: `${ind}` })
    }

    // 设置默认展开
    const defo = this.getDefaultOpenBlock
    if (!this.disabled && defo.includes(this.order)) {
      this.height = 'auto'
    }
    // has default slot
    this.isShowModule = !!this.$slots.default
  },
  mounted() {},
  updated() {
    this.isShowModule = !!this.$slots.default
  },
  beforeDestroy() {},
  methods: {
    ...mapMutations('cmlpanel', [
      'setBlockGroupInfo',
      'addBlockGroupInfo',
      'removeBlockInfo',
      'removeBlockUniqInfo',
      'removeBlockInfoLeftOne'
    ]),
    // 折叠or展开
    toggleCollapse() {
      if (this.disabled) return

      if (!this.defaultOpen) {
        this.open()
      } else {
        this.collapse()
      }
    },
    // 禁用
    disable() {
      this.disabled = true
    },
    // 启用
    enable() {
      this.disabled = false
    },
    // 打开
    open() {
      let unq = this.collapseData.uniqueOpened
      if (unq) {
        this.removeBlockUniqInfo({ name: this.group, data: this.order })
      } else {
        this.addBlockGroupInfo({ name: this.group, data: this.order })
      }
    },
    // 关闭
    collapse() {
      // 移除state里的信息
      this.removeBlockInfo({ name: this.group, data: this.order })
    },
    // todo 展开和关闭的动画控制优化
    beforeEnter(el) {
      let elh = window.getComputedStyle(el).height
    },
    enter(el, done) {
      let elh = window.getComputedStyle(el).height
      this.height = elh
      done()
    },
    afterEnter(el) {
      let elh = window.getComputedStyle(el).height
    },
    leave(el, done) {
      let elh = window.getComputedStyle(el).height
      this.height = 0
      done()
    }
  }
}
</script>
<style lang="scss" scoped>
@import '../style/panel-var.scss';

.cml-collapse {
  overflow: hidden;

  transition: all ease 0.2s;
}
.cml-collapse-btn {
  width: 0.8em;
  padding: 0 2px;
  border: none;

  color: $text-color;
  background-color: transparent;

  transition: all ease 0.2s;

  cursor: pointer;
  &:hover,
  &:focus {
    color: $text-active-color;
  }
  .triangle {
    vertical-align: middle;

    transition: all ease 0.2s;
  }
}
.arrow-open {
  transform: rotate(60deg);
  transform-origin: 3px 3.2px;
}
</style>
